<template>
  <a-layout-sider>
    <!-- 发布按钮 -->
    <a-button type="primary"  block>
      <a-icon type="cloud-upload" />发布作品
    </a-button>
    <!-- 导航组件 -->
      <a-menu 
      :selectedKeys="[$route.path]">
      <a-menu-item key="/index">
        <router-link to="index">
          <a-icon type="home" /><span>首页</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="/management">
        <router-link to="/management">
          <a-icon type="appstore" /><span>作品管理</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="/videoData">
        <router-link to="/videoData">
          <a-icon type="bar-chart" /><span>视频数据</span>
        </router-link>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script>
export default {
  name: 'siderMenu',
  components: {
  }
}
</script>

<style lang="scss" scoped>
.ant-layout .ant-layout-sider{
  background-color: #fff;
  .ant-menu-vertical{
    border-right: 0px //清除导航选项的右边线
  }
  .ant-btn{
    margin: 20px;
    width: 160px;
    background-color: $themeColor;
    box-shadow: 1px 3px 3px 0px $themeColor;
    border: 1px solid $themeColor;
  }
  .ant-menu-item.ant-menu-item-selected{
    border-left: 3px $themeColor solid ;
  }
}
</style>
